<template>
  <BaseMainSlot>
    <!-- 这页面 -->
    <template v-slot:zhactbar>
      <ActionBar
        :page-no="98"
        :add-active="addActive"
        :del-active="delActive"
        :cancel-active="cancelActive"
        :has-edit="false"
        :has-del="false"
        :has-save="false"
        :save-active="saveActive"
        :has-fasong="true"
        fasong-text="unitType"
        @fasong="examine"
        @add="add"
        @cancel="cancel"
        @del="del"
      />
      <!-- <el-button class="examine" @click="examine">单位类型提交</el-button> -->
    </template>
    <template v-slot:boxleft>
      <div class="zhtabletitle">已有单位类型</div>
      <el-table
        v-loading="loading"
        highlight-current-row
        :data="tableData"
        stripe
        border
        height="calc(100% - 80px)"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column
          type="index"
          label="序号"
          width="100"
        />
        <el-table-column
          prop="unitTypeName"
          label="单位类型名称"
        />
        <el-table-column
          width="200"
          label="操作"
        >
          <template
            v-if="scope.row.unitTypeNo"
            slot-scope="scope"
          >
            <el-button
              v-if="judgePermission(98,'delete')"
              class="text-btn-cursor cursor-delete"
              type="text"
              size="small"
              @click="handleDelete(scope.row.unitTypeNo)"
            >
              <i class="el-icon-delete"></i> 删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :page-size="pageSize"
        :current-page="currentPage"
        :total-size="totalSize"
        @changePageSize="changePageSize"
        @changeCurrentPage="changeCurrentPage"
      />
    </template>
    <template v-slot:boxright>
      <div class="zhtabletitle">所有单位类型</div>
      <el-table
        v-loading="loadingtwo"
        highlight-current-row
        :data="tableDatatwo"
        stripe
        border
        height="calc(100% - 80px)"
        @selection-change="handleSelectionChangetwo"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          type="index"
          label="序号"
          width="100"
        />
        <el-table-column
          prop="unitTypeName"
          label="单位类型名称"
        />
        <!-- <el-table-column prop="symbol" label="单位类型符号" /> -->
      </el-table>
      <Pagination
        :page-size="pageSizetwo"
        :current-page="currentPagetwo"
        :total-size="totalSizetwo"
        @changePageSize="changePageSizetwo"
        @changeCurrentPage="changeCurrentPagetwo"
      />
    </template>
    <template v-slot:dig>
      <!-- 新增业务组件的弹框 -->
      <dialogds
        title="单位类型"
        :visible="dialogExamineFormVisible"
        @close="close"
        @titlebtn="titlebtn"
      >
        <template v-slot:form>
          <el-form
            ref="ExamineForm"
            label-position="left"
            :model="ExamineForm"
            class="el-form"
          >
            <el-form-item
              label="单位类型名称:"
              :rules="[{
                message: '单位类型名称不能为空',
                trigger: 'blur',
                required: true
              }]"
              prop="unitTypeName"
              class="w50p"
            >
              <el-input
                v-model="ExamineForm.unitTypeName"
                clearable
              />
            </el-form-item>
          </el-form>
          <!-- <div>
          </div>-->
        </template>
        <template v-slot:btn>
          <el-button
            class="zh-button-two"
            type="primary"
            @click="savemes"
          >提 交</el-button>
        </template>
        <template v-slot:table>
          <el-input
            v-model="esname"
            style="margin-bottom: 10px;width: 30%;"
            placeholder="输入名称查询"
            clearable
            @input="titlebtn(2)"
          />

          <el-table
            v-loading="loading"
            highlight-current-row
            :data="ExamineTable"
            stripe
            border
            height="calc(100% - 90px)"
          >
            <el-table-column
              type="index"
              label="序号"
              width="100"
            />
            <el-table-column
              prop="unitTypeName"
              label="单位类型"
            />
            <el-table-column
              prop="reason"
              label="原因"
            >
              <template slot-scope="scope">{{ scope.row.reason || '————' }}</template>
            </el-table-column>
            <el-table-column
              prop="applyStatus"
              label="状态"
            >
              <template slot-scope="scope">
                <span
                  v-if="scope.row.applyStatus === 1"
                  style="color: yellow;font-weight: 600;"
                >审核中</span>
                <span
                  v-if="scope.row.applyStatus === 0"
                  style="color: green;font-weight: 600;"
                >通过</span>
                <span
                  v-if="scope.row.applyStatus === 2"
                  style="color: red;font-weight: 600;"
                >审核不通过</span>
              </template>
            </el-table-column>

            <el-table-column
              width="200"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button
                  class="text-btn-cursor"
                  type="text"
                  :disabled="scope.row.applyStatus !== 1"
                  size="small"
                  style="height: 15px"
                  @click="Examineedit(scope.row)"
                >
                  <i class="el-icon-edit-outline"></i>修 改
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </dialogds>
      <el-dialog
        title="提示"
        :visible.sync="dialogExaminesVisible"
        width="30%"
      >
        <el-form
          ref="ExamineForms"
          label-position="left"
          :model="ExamineForms"
          class="el-form"
        >
          <el-form-item
            label="单位类型名称:"
            :rules="[{
              message: '单位类型名称不能为空',
              trigger: 'blur',
              required: true
            }]"
            prop="unitTypeName"
            class="w50p"
          >
            <el-input
              v-model="ExamineForms.unitTypeName"
              clearable
            />
          </el-form-item>
        </el-form>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button
            class="zh-button-one"
            @click="dialogExaminesVisible = false"
          >取 消</el-button>
          <el-button
            class="zh-button-two"
            type="primary"
            @click="savees"
          >确 定</el-button>
        </span>
      </el-dialog>
    </template>
  </BaseMainSlot>
</template>
<script>
import ActionBar from "@/components/ActionBar/index";
import Pagination from "@/components/Pagination";
import nowpagereq from "@/api/basic-info-manage/unit-type-manage";
import BaseMainSlot from "@/components/BaseMainSlot/basezuoyou.vue";
import { mymixin } from "@/utils/mixins";
import dialogds from "../component/dialog.vue";
import { mapGetters } from "vuex";
// import { getToken } from '@/utils/auth';
export default {
  name: "UnitTypeManage",
  components: { ActionBar, Pagination, BaseMainSlot, dialogds },
  mixins: [mymixin],
  data() {
    return {
      // ----表格二号----
      loadingtwo: true,
      // 当前页
      currentPagetwo: 1,
      // 每页的数据条数
      pageSizetwo: 10,
      // 总条数
      totalSizetwo: 0,
      tableData: [],
      // 表格二号数据
      tableDatatwo: [],
      // 是否能输入
      // -------
      canInput: false,
      rules: {},
      // 选中的数据项数组 employeeId组成 (此数组最多为一个)
      nowselectedList: [],
      dialogExamineFormVisible: false,
      dialogExaminesVisible: false,
      ExamineForms: {}
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission"
    })
  },
  watch: {},
  created() {
    this.getTableDataListone();
    // 获取表格数据
    this.getTableDataListtwo();
  },
  mounted() {},
  methods: {
    examine() {
      this.dialogExamineFormVisible = true;
      // this.$refs['ExamineForm'].resetFields();
    },
    savemes() {
      this.$refs["ExamineForm"].validate(valid => {
        if (valid) {
          let param = {
            ...this.ExamineForm,
            organizationNo: sessionStorage.organizationNo
          };
          nowpagereq.addList(param).then(response => {
            let mes = response;
            if (mes.code === 1) {
              this.$message.success("提交成功！");
              this.ExamineForm = {};
              this.$refs["ExamineForm"].resetFields();
              // this.gettabledataList()
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    Examineedit(e) {
      this.ExamineForms = { ...e };
      this.dialogExaminesVisible = true;
    },
    savees() {
      this.$refs["ExamineForms"].validate(valid => {
        if (valid) {
          let param = {
            ...this.ExamineForms
          };
          nowpagereq.editList(param).then(response => {
            let mes = response;
            if (mes.code === 1) {
              this.$message.success("修改成功！");
              this.ExamineForms = {};
              this.$refs["ExamineForms"].resetFields();
              this.dialogExaminesVisible = false;
              // this.gettabledataList()
              this.titlebtn(2);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    close(e) {
      this.dialogExamineFormVisible = e;
    },
    titlebtn(e) {
      if (e === 2) {
        let params = {
          page: this.currentPage,
          size: this.pageSize,
          entity: {
            unitTypeNo: this.unitTypeNo,
            unitName: this.unitName
          },
          organizationNo: sessionStorage.organizationNo,
          unitTypeName: this.esname
        };
        nowpagereq.getList(params).then(response => {
          let mes = response.data;
          if (response.code === 1) {
            this.ExamineTable = mes;
            this.resetActionBar();
          } else {
            this.$message.warning("获取表格失败");
          }
        });
      }
    },
    // 获取当前拥有类型表格
    getTableDataListone() {
      this.loading = true;
      let params = {
        page: this.currentPage,
        size: this.pageSize
      };
      nowpagereq.getPlantingUnitList(params).then(res => {
        this.loading = false;
        if (res.code === 0) {
          this.$message.error("当前单位类型表格获取失败");
        }
        let data = res.data;
        // 赋值总条数
        this.totalSize = data.totalElements;
        // 赋值数组
        this.tableData = data.content;
        this.addblankmet();
        this.resetActionBar();
        this.addActive = false;
      });
    },
    // 获取所有单位类型表格
    getTableDataListtwo() {
      this.loadingtwo = true;
      nowpagereq
        .getallunitlist({ page: this.currentPagetwo, size: this.pageSizetwo })
        .then(res => {
          this.loadingtwo = false;
          if (res.code === 0) {
            this.$message.error("所有单位类型表格获取失败");
          }
          let data = res.data;
          // 赋值总条数
          this.totalSizetwo = data.totalElements;
          // 赋值数组
          this.tableDatatwo = data.content;

          let havline = this.tableDatatwo.length % this.pageSizetwo;
          if (this.tableDatatwo.length < this.pageSizetwo) {
            if (havline < this.pageSizetwo) {
              const remain = this.pageSizetwo - havline;
              for (var i = 0; i < remain; i++) {
                this.tableDatatwo.push({
                  indflag: i + this.tableDatatwo.length - 1
                });
              }
            }
          }

          this.resetActionBar();
          this.addActive = false;
        });
    },
    search() {
      this.currentPage = 1;
      this.getTableDataList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getTableDataList();
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.getTableDataList();
    },
    changePageSizetwo(pageSize) {
      this.pageSizetwo = pageSize;
      this.getTableDataListtwo();
    },
    changeCurrentPagetwo(currentPage) {
      this.currentPagetwo = currentPage;
      this.getTableDataListtwo();
    },
    handleSelectionChange(list) {
      this.nowselectedList = [];
      this.nowselectedList = list.map(item => {
        return item.id;
      });
      if (this.nowselectedList && this.nowselectedList.length > 0) {
        this.delActive = true;
      } else this.delActive = false;
    },
    handleSelectionChangetwo(list) {
      // list.forEach((element, index) => {
      //   if (!element.unitTypeNo) {
      //     list.splice(index, 1)
      //   }
      // });
      this.nowselectedTwoList = [];
      let lists = list.map(item => {
        if (item.unitTypeNo) {
          return item.unitTypeNo;
        } else {
          return "";
        }
        // return {
        //   'description': item.description,
        //   'unitNo': item.unitNo,
        //   'unitTypeName': item.unitTypeName,
        //   'unitTypeNo': item.unitTypeNo,
        //   'symbol': item.symbol,
        //   'basicRatio': item.basicRatio,
        //   'organizationNo': sessionStorage.getItem('organizationNo') }
      });
      var r = lists.filter(function(s) {
        return s && s.trim(); // 注：IE9(不包含IE9)以下的版本没有trim()方法
      });
      this.nowselectedTwoList = r;
      // // for (let i = 0; i < this.nowselectedTwoList.length; i++) {
      // //   if (this.nowselectedTwoList[i] === '') {
      // //     this.nowselectedTwoList.splice(i, 1)
      // //   }
      // // }
      // // for (let i = 0; i < this.nowselectedTwoList.length; i++) {
      // //   if (this.nowselectedTwoList[i] === '') {
      // //     this.nowselectedTwoList.splice(i, 1)
      // //   }
      // // }
      // // for (let i = 0; i < this.nowselectedTwoList.length; i++) {
      // //   if (this.nowselectedTwoList[i] === '') {
      // //     this.nowselectedTwoList.splice(i, 1)
      // //   }
      // // }
      // console.log(list, this.nowselectedTwoList)
      if (this.nowselectedTwoList && this.nowselectedTwoList.length > 0) {
        this.addActive = true;
      } else this.addActive = false;
    },
    // delmessage() {
    //   if (this.nowChanceStau === 'del') {
    //     nowpagereq.delFarmingTypelist(this.nowselectedList).then(
    //       res => {
    //         if (res.code === 1) {
    //           this.getTableDataListone()
    //           this.$message.success('删除成功')
    //         } else {
    //           this.$message.error('删除失败')
    //         }
    //       }
    //     )
    //   }
    // },
    handleDelete(noticeConfigNo) {
      this.$confirm("是否删除单位类型？", "删除单位类型", {
        distinguishCancelAndClose: true,
        confirmButtonClass: "btnFalses",
        confirmButtonText: "删除",
        cancelButtonText: "取消删除"
      })
        .then(() => {
          nowpagereq.delPlantingUnitById([noticeConfigNo]).then(res => {
            if (res.code === 1) {
              this.$message.success("删除成功");
              this.getTableDataListone();
            } else {
              this.$message.error("删除失败");
            }
          });
        })
        .catch(action => {
          // this.$message({
          //   type: 'info',
          //   message: action === 'cancel'
          //     ? '取消删除'
          //     : '停留在当前页面'
          // })
        });
    },
    add() {
      nowpagereq.addPlantingUnitInfo(this.nowselectedTwoList).then(res => {
        if (res.code === 1) {
          this.getTableDataListone();
          this.$message.success("添加成功");
        } else {
          this.$message.error("添加失败");
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.zhtabletitle {
  color: #31f7dd;
  margin-bottom: 10px;
}
// ::v-deep .el-message-box__wrapper {
//       background: red !important;
//   .el-message-box {
//     .btnFalses {
//       background: red !important;
//     }
//   }
// }
</style>
